<template>
  <div>

    <div>
      {{ formOfEmployment }}
      {{ quanbuser }}
      {{ quanbuser.id }}
      br

      大撒大苏打 {{ form }}
      {{ quanbuser.staffPhoto }}

      <el-form ref="form" label-width="250px" :model="quanbuser" :rules="rules">

        <div class="jibenxx">
          <div class="left">
            <el-form-item label="工号" prop="workNumber">
              <el-input v-model="quanbuser.workNumber" />
            </el-form-item>

            <el-form-item label="姓名" prop="username">
              <el-input v-model="quanbuser.username" />
            </el-form-item>

            <el-form-item label="手机" prop="mobile">
              <el-input v-model="quanbuser.mobile" />
            </el-form-item>

            <el-form-item label="员工头像">
              <Uploadsc v-model="quanbuser.staffPhoto" />
            </el-form-item>

            <el-form-item label-width="150px">
              <el-button type="primary" @click="baochigx">保持更新</el-button>
              <el-button>返回</el-button>
            </el-form-item>
          </div>
          <div class="ring">
            <el-form-item label="入职时间" prop="correctionTime">
              <el-input v-model="quanbuser.correctionTime" />
            </el-form-item>

            <el-form-item label="部门" prop="departmentName">
              <el-input v-model="quanbuser.departmentName" />
            </el-form-item>

            <el-form-item label="聘用形式">
              <el-select v-model="formOfEmployment" class="inputW">
                <el-option
                  v-for="item in obj.hireType"
                  :key="item.id"
                  :label="item.value"
                  :value="item.id"
                />
              </el-select>
            </el-form-item>
          </div>
        </div>

        <div class="jichuxx">
          <p style="font-size: 15px;">基础信息</p>
          <el-form-item

            label="最高学历"
          >
            <el-select v-model="form.theHighestDegreeOfEducation" class="inputW2">
              <el-option
                v-for="item in obj.highestDegree"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="员工头像">
            <Uploadsc v-model="obj.staffPhoto" />

            <el-dialog :visible.sync="dialogVisible">
              <img width="100%" :src="dialogImageUrl" alt="">
            </el-dialog>
          </el-form-item>

          <el-form-item label="国家/护照">
            <el-select v-model="form.nationalArea" class="inputW2">
              <el-option
                v-for="item in obj.isOverseas"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="护照号">
            <el-input />
          </el-form-item>
          <el-form-item label="身份证">
            <el-input />
          </el-form-item>
          <el-form-item label="籍贯">
            <el-input />
          </el-form-item>
          <el-form-item label="民族">
            <el-input />
          </el-form-item>
          <el-form-item label="婚姻状况">
            <el-select v-model="form.maritalStatus" class="inputW2">
              <el-option
                v-for="item in obj.maritaStatus"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="生日">
            <el-input />
          </el-form-item>
          <el-form-item label="年龄">
            <el-input v-model="form.age" type="number" class="inputW2" />
          </el-form-item>
          <el-form-item label="星座">
            <el-select v-model="form.constellation" class="inputW2">
              <el-option
                v-for="item in obj.constellation"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="血型">
            <el-select v-model="form.bloodType" class="inputW2">
              <el-option
                v-for="item in obj.bloodType"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="户籍所在地">
            <el-input />
          </el-form-item>
          <el-form-item label="政治面貌">
            <el-input class="a" />
          </el-form-item>
          <el-form-item label="入党机构">
            <el-date-picker
              v-model="form.timeToJoinTheParty"
              type="date"
              placeholder="选择日期"
              class="inputW"
              value-format="yyyy-MM-dd"
            />
          </el-form-item>
          <el-form-item label="充当机构">
            <el-input />
          </el-form-item>
          <el-form-item label="子女状态">
            <el-input />
          </el-form-item>
          <el-form-item label="子女有无线商业险">
            <el-radio v-model="form.sex" label="1">女</el-radio>
            <el-radio v-model="form.sex" label="2">男</el-radio>
          </el-form-item>
          <el-form-item label="有无违法纪状态">
            <el-input />
          </el-form-item>
          <el-form-item label="有无大众病历史">
            <el-input />
          </el-form-item>

        </div>
        <div class="txxx">
          <p style="font-size: 15px;">通信信息</p>
          <el-form-item label="QQ">
            <el-input class="a" />
          </el-form-item>
          <el-form-item label="微信">
            <el-input class="a" />
          </el-form-item>
          <el-form-item label="居住地址">
            <el-input />
          </el-form-item>
          <el-form-item label="通讯地址">
            <el-input />
          </el-form-item>
          <el-form-item label="联系手机">
            <el-input class="a" />
          </el-form-item>
          <el-form-item label="个人邮箱">
            <el-input class="a" />
          </el-form-item>
          <el-form-item label="紧急联系人">
            <el-input class="a" />
          </el-form-item>
          <el-form-item label="紧急联系电话">
            <el-input class="a" />
          </el-form-item>
        </div>

        <div class="zhhaoxx">
          <p style="font-size: 15px;">账号信息</p>
          <el-form-item label="社保电脑号">
            <el-input class="a" />
          </el-form-item>
          <el-form-item label="公积金账号">
            <el-input class="a" />
          </el-form-item>
          <el-form-item label="银行卡号">
            <el-input class="a" />
          </el-form-item>
          <el-form-item label="社保电脑号">
            <el-input class="a" />
          </el-form-item>

        </div>

        <div class="zhhaoxx">
          <p style="font-size: 15px;">教育信息</p>
          <el-form-item label="学历类型">
            <el-select v-model="form.educationalType" placeholder="请选择">
              <el-option
                v-for="item in obj.educationType"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="毕业学校">
            <el-input class="a" />
          </el-form-item>
          <el-form-item label="入学时间">
            <el-input class="a" />
          </el-form-item>
          <el-form-item label="毕业时间">
            <el-input class="a" />
          </el-form-item>

          <el-form-item label="专业">
            <el-input class="a" />
          </el-form-item>

        </div>

        <div class="企业信息">
          <p style="font-size: 15px;">教育信息</p>
          <el-form-item label="上加公司">
            <el-input class="a" />
          </el-form-item>
          <el-form-item label="职称">
            <el-input class="a" />
          </el-form-item>
          <el-form-item label="有无竞业限制">
            <el-input class="a" />
          </el-form-item>
          <el-form-item label="备注">
            <el-input type="textarea" :rows="2" class="a" />
          </el-form-item>
          <el-form-item label-width="300px">
            <el-button type="primary" @click="baocgx2">保持更新</el-button>
            <el-button>返回</el-button>
          </el-form-item>
        </div>
      </el-form>

    </div>
  </div></template>

<script>
import { obj } from '@/api/constant/employees'
import { sysuserid, employeesidpersonalInfo, employeesidpersonalInfobc } from '@/api/yuangon'
export default {

  props: {
    quanbuser: {
      type: Object,
      default: () => { [] }
    }
  },
  data() {
    return {
      id: this.$route.params.id,
      obj,
      // staffPhoto: this.quanbuser.staffPhoto || [],
      formOfEmployment: this.quanbuser.formOfEmployment,
      dialogImageUrl: '',
      dialogVisible: false,
      radio: 1,
      value2: '',
      form: {
        userId: '',
        username: '', // 用户名
        sex: '', // 性别
        mobile: '', // 手机
        companyId: '', // 公司id
        departmentName: '', // 部门名称
        //  onTheJobStatus: '', // 在职状态 no
        dateOfBirth: '', // 出生日期
        timeOfEntry: '', // 入职时间
        theHighestDegreeOfEducation: '', // 最高学历
        nationalArea: '', // 国家
        passportNo: '', // 护照号
        idNumber: '', // 身份证号
        idCardPhotoPositive: '', // 身份证照正
        idCardPhotoBack: '', // 身份证照正
        nativePlace: '', // 籍贯
        nation: '', // 民族
        englishName: '', // 英文名字
        maritalStatus: '', // 婚姻状况
        staffPhoto: '', // 员工照片
        birthday: '', // 生日
        zodiac: '', // 属相
        age: '', // 年龄
        constellation: '', // 星座
        bloodType: '', // 血型
        domicile: '', // 户籍所在地
        politicalOutlook: '', // 政治面貌
        timeToJoinTheParty: '', // 入党时间
        archivingOrganization: '', // 存档机构
        stateOfChildren: '', // 子女状态
        doChildrenHaveCommercialInsurance: '1', // 保险状态
        isThereAnyViolationOfLawOrDiscipline: '', // 违法违纪状态
        areThereAnyMajorMedicalHistories: '', // 重大病史
        qq: '', // QQ
        wechat: '', // 微信
        residenceCardCity: '', // 居住证城市
        dateOfResidencePermit: '', // 居住证办理日期
        residencePermitDeadline: '', // 居住证截止日期
        placeOfResidence: '', // 现居住地
        postalAddress: '', // 通讯地址
        contactTheMobilePhone: '', // 联系手机
        personalMailbox: '', // 个人邮箱
        emergencyContact: '', // 紧急联系人
        emergencyContactNumber: '', // 紧急联系电话
        socialSecurityComputerNumber: '', // 社保电脑号
        providentFundAccount: '', // 公积金账号
        bankCardNumber: '', // 银行卡号
        openingBank: '', // 开户行
        educationalType: '', // 学历类型
        graduateSchool: '', // 毕业学校
        enrolmentTime: '', // 入学时间
        graduationTime: '', // 毕业时间
        major: '', // 专业
        graduationCertificate: '', // 毕业证书
        certificateOfAcademicDegree: '', // 学位证书
        homeCompany: '', // 上家公司
        title: '', // 职称
        resume: '', // 简历
        isThereAnyCompetitionRestriction: '', // 有无竞业限制
        proofOfDepartureOfFormerCompany: '', // 前公司离职证明
        remarks: '' // 备注
      },
      rules: {
        workNumber: [
          { required: true, message: '不能为空', trigger: 'change' }

        ],
        username: [
          { required: true, message: '不能为空', trigger: 'change' }
        ],
        mobile: [
          { required: true, message: '不能为空', trigger: 'change' },
          { pattern: /^1[3,9]\d{9}$/, message: '请输入正确的电话号码', trigger: 'change' }
        ],
        departmentName: [
          { required: true, message: '不能为空', trigger: 'change' }
        ],
        correctionTime: [
          { required: true, message: '不能为空', trigger: 'change' }
        ]

      }

    }
  },
  created() {
    this.getdata()
  },

  methods: {
    // 基本信息
    async getdata() {
      const res = await employeesidpersonalInfo(this.id)
      this.form = res.data.data
    },

    jianjitp(file, fileList) {
      console.log(file, fileList)
    },
    wenjianyic(file) {
      this.dialogImageUrl = file.url
      this.dialogVisible = true
    },
    // 保持更新
    async baochigx() {
      await this.$refs.form.validate()
      await sysuserid(this.quanbuser)
      // 判断是否是修改到当前用户，在更新
      if (this.$store.state.user.userPro.id === this.quanbuser.id) {
        this.$emit('geData')
        this.$store.dispatch('user/yhjbxx')
        this.$message.success('更新成功')
      }
    },
    // 保存员工基本信息2
    async baocgx2() {
      await employeesidpersonalInfobc(this.form)
      this.$message.success('更新成功')
    }
  }
}
</script>

<style scoped lang="scss">
.a {
  width: 250px;
}

.jibenxx {
  display: flex;
  justify-content: space-around;

  ::v-deep .avatar-uploader .el-upload {
    border: 1px dashed #000000;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }

  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }

  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 100px;
    height: 100px;
    line-height: 100px;
    text-align: center;
  }

  .avatar {
    width: 100px;
    height: 100px;
    display: block;
  }

}

::v-deep .el-upload--picture-card {
  width: 100px;
  height: 100px;
  line-height: 100px;

}

::v-deep .el-upload-list--picture-card .el-upload-list__item {
  width: 100px;
  height: 100px;

}
</style>
